<template>
  <div>
    <el-button type="primary" @click="openAddDialog">添加酒店订单</el-button>
    <el-button type="primary" @click="fetchHotelOrders">显示所有订单</el-button>
    <el-button type="primary" @click="fetchOrdersByStatus('upcoming')">查询未出行订单</el-button>
    <el-button type="primary" @click="fetchOrdersByStatus('payed')">查询已支付订单</el-button>

    <el-table :data="hotelOrders" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="userID" label="用户ID" width="100"></el-table-column>
      <el-table-column prop="hotelID" label="酒店ID" width="100"></el-table-column>
      <el-table-column prop="roomNum" label="房间号" width="100"></el-table-column>
      <el-table-column prop="roomType" label="房间类型" width="150"></el-table-column>
      <el-table-column prop="rztime" label="入住时间" width="180"></el-table-column>
      <el-table-column prop="tftime" label="退房时间" width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="100"></el-table-column>
      <el-table-column prop="payWay" label="支付方式" width="150"></el-table-column>
      <el-table-column prop="status" label="状态" width="100"></el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteHotelOrder(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 编辑订单对话框 -->
    <el-dialog title="编辑酒店订单" v-model="isEditDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="用户ID">
          <el-input v-model="editForm.userID"></el-input>
        </el-form-item>
        <el-form-item label="酒店ID">
          <el-input v-model="editForm.hotelID"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="editForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-input v-model="editForm.roomType"></el-input>
        </el-form-item>
        <el-form-item label="入住时间">
          <el-date-picker v-model="editForm.rztime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="退房时间">
          <el-date-picker v-model="editForm.tftime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="editForm.payWay" placeholder="请选择支付方式">
            <el-option label="闪付" value="闪付"></el-option>
            <el-option label="在线支付" value="在线支付"></el-option>
            <el-option label="到店支付" value="到店支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status" placeholder="请选择状态">
            <el-option label="未入住" value="upcoming"></el-option>
            <el-option label="已支付" value="payed"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateHotelOrder">确认</el-button>
      </div>
    </el-dialog>

    <!-- 添加订单对话框 -->
    <el-dialog title="添加酒店订单" v-model="isAddDialogVisible">
      <el-form :model="addForm">
        <el-form-item label="用户ID">
          <el-input v-model="addForm.userID"></el-input>
        </el-form-item>
        <el-form-item label="酒店ID">
          <el-input v-model="addForm.hotelID"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="addForm.roomNum"></el-input>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-input v-model="addForm.roomType"></el-input>
        </el-form-item>
        <el-form-item label="入住时间">
          <el-date-picker v-model="addForm.rztime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="退房时间">
          <el-date-picker v-model="addForm.tftime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="addForm.payWay" placeholder="请选择支付方式">
            <el-option label="闪付" value="闪付"></el-option>
            <el-option label="在线支付" value="在线支付"></el-option>
            <el-option label="到店支付" value="到店支付"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addForm.status" placeholder="请选择状态">
            <el-option label="未入住" value="upcoming"></el-option>
            <el-option label="已支付" value="payed"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- eslint-disable-next-line -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addHotelOrder">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { listHotelOrders, deleteHotelOrder as deleteHotelOrderAPI, updateHotelOrder as updateHotelOrderAPI, addHotelOrder as addHotelOrderAPI, getHotelOrderByStatus } from '@/api/hotelOrder.js';
import { ElMessageBox, ElMessage } from 'element-plus';
import moment from 'moment';

const hotelOrders = ref([]);
const isEditDialogVisible = ref(false);
const isAddDialogVisible = ref(false);

const editForm = ref({
  id: '',
  userID: '',
  hotelID: '',
  roomNum: '',
  roomType: '',
  rztime: '',
  tftime: '',
  price: '',
  payWay: '',
  status: ''
});

const addForm = ref({
  userID: '',
  hotelID: '',
  roomNum: '',
  roomType: '',
  rztime: '',
  tftime: '',
  price: '',
  payWay: '',
  status: ''
});

const fetchHotelOrders = async () => {
  try {
    const response = await listHotelOrders();
    if (response.code === 1) {
      hotelOrders.value = response.data;
    } else {
      throw new Error(response.msg);
    }
  } catch (error) {
    console.error('Error fetching hotel orders:', error);
  }
};

const fetchOrdersByStatus = async (status) => {
  try {
    const response = await getHotelOrderByStatus(status);
    if (response.code === 1) {
      hotelOrders.value = response.data;
    } else {
      throw new Error(response.msg);
    }
  } catch (error) {
    console.error('Error fetching hotel orders by status:', error);
  }
};

const openEditDialog = (hotelOrder) => {
  editForm.value = { ...hotelOrder };
  isEditDialogVisible.value = true;
};

const openAddDialog = () => {
  addForm.value = {
    userID: '',
    hotelID: '',
    roomNum: '',
    roomType: '',
    rztime: '',
    tftime: '',
    price: '',
    payWay: '',
    status: ''
  };
  isAddDialogVisible.value = true;
};

const formatDateTime = (dateTime) => {
  return moment(dateTime).format('YYYY-MM-DD HH:mm:ss');
};

const updateHotelOrder = async () => {
  try {
    const updatedHotelOrder = {
      ...editForm.value,
      rztime: formatDateTime(editForm.value.rztime),
      tftime: formatDateTime(editForm.value.tftime)
    };
    await updateHotelOrderAPI(updatedHotelOrder);
    ElMessage({
      type: 'success',
      message: '更新酒店订单成功!'
    });
    isEditDialogVisible.value = false;
    fetchHotelOrders();
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '更新酒店订单失败'
    });
    console.error('Error updating hotel order:', error);
  }
};

const addHotelOrder = async () => {
  try {
    const newHotelOrder = {
      ...addForm.value,
      rztime: formatDateTime(addForm.value.rztime),
      tftime: formatDateTime(addForm.value.tftime)
    };
    await addHotelOrderAPI(newHotelOrder);
    ElMessage({
      type: 'success',
      message: '添加酒店订单成功!'
    });
    isAddDialogVisible.value = false;
    fetchHotelOrders();
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '添加酒店订单失败'
    });
    console.error('Error adding hotel order:', error);
  }
};

const deleteHotelOrder = (id) => {
  ElMessageBox.confirm('此操作将永久删除该订单, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteHotelOrderAPI(id);
      ElMessage({
        type: 'success',
        message: '删除成功!'
      });
      fetchHotelOrders();
    } catch (error) {
      ElMessage({
        type: 'error',
        message: '删除失败'
      });
      console.error('Error deleting hotel order:', error);
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

onMounted(() => {
  fetchHotelOrders();
});
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
